<template>
  <div class="hour24">
    <div class="title">24小时预报</div>
    <!-- 展示8条 -->
    <el-row v-if="showSize === 1" class="show">
      <template v-for="item in hour8" :key="item.time">
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <hour24Content :hour="hour8" :item="item" />
        </el-col>
      </template>
    </el-row>
    <!-- 展示12条 -->
    <el-row v-if="showSize === 2" class="show">
      <template v-for="item in hour12" :key="item.time">
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <hour24Content :hour="hour12" :item="item" />
        </el-col>
      </template>
    </el-row>
    <!-- 展示24条 -->
    <el-row v-if="showSize === 3" class="show">
      <template v-for="item in hour" :key="item.time">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
          <hour24Content :hour="hour" :item="item" />
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script setup>
import hour24Content from "@/components/main/hour24-content.vue";

import { computed, ref } from "vue";

const props = defineProps({
  hour: {
    type: Array,
  },
});

// 根据宽度来筛选展示24/12/8长度
// 12hour
const hour12 = computed(() => {
  return props.hour.filter((item, index) => index % 2 === 0);
});
// 8hour
const hour8 = computed(() => {
  return props.hour.filter((item, index) => index % 3 === 0);
});

const showSize = ref(2);
const changeSize = (width) => {
  if (width < 650) {
    showSize.value = 1;
  } else if (width > 1200) {
    showSize.value = 3;
  } else if (650 < width < 1200) {
    showSize.value = 2;
  }
};
changeSize(window.innerWidth);
window.onresize = () => {
  changeSize(window.innerWidth);
};
</script>

<style lang="less" scoped>
.hour24 {
  padding: 30px 0 24px;
  margin-bottom: 16px;

  border-radius: 16px;
  background-color: #f7f8f9;
  border: 1px solid #f2f4fa;
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    margin-bottom: 28px;
  }
  .show {
    display: flex;
  }
}
</style>